<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大富翁</title>
    <script src="jquery.min.js"></script>
</head>
<body>
<div class="box">
    <div class="pop"></div>
    <div class="path">
        <div class="lu lu1"></div>
        <div class="lu lu2"></div>
        <div class="lu lu3"></div>
        <div class="lu lu4"></div>
        <div class="lu lu5"></div>
        <div class="lu lu6"></div>
        <div class="lu lu7"></div>
        <div class="lu lu8"></div>
        <div class="lu lu9"></div>
        <div class="lu lu10"></div>
        <div class="lu lu11"></div>
    </div>

</div>
<button id="btn">运动</button>
<p id="p"></p>
</body>
<style>
    .box{
        width: 500px;
        height: 500px;
        position: relative;
        border: 1px solid red;

    }
    .pop{
        width: 20px;
        height: 20px;
        background: yellow;
        position: absolute;
        top:10px;
        left: 10px;
        z-index: 100;
    }
    .path{
        position: absolute;
        top:0;
        width: 500px;
        height:500px;
    }
    .lu{
        width: 40px;
        height: 40px;
        background: red;
        position: absolute;
        border: 1px solid blue;
        box-sizing: border-box;

    }
    .lu1{
        top:0;
        left: 0;
    }
    .lu2{
            top:0;
            left: 40px;
        }
    .lu3{
        top:0;
        left: 80px;
    }
    .lu4{
        top:0;
        left: 120px;
    }
    .lu5{
        top:40px;
        left: 120px;
    }
    .lu6{
        top:80px;
        left: 120px;
    }
    .lu7{
        top:120px;
        left: 120px;
    }
    .lu8{
        top:120px;
        left: 160px;
    }
    .lu9{
        top:120px;
        left: 200px;
    }
    .lu10{
        top:160px;
        left: 200px;
    }
    .lu11{
        top:160px;
        left: 240px;
    }
</style>
<script>
    $(function () {
        var lus = $(".lu");
        var arr=[];
        lus.each(function (i, v) {
           var x = $(this).position().left+10;
           var y = $(this).position().top+10;
           arr.push({
               x:x,
               y:y
           })
        });
        console.log(arr)
        function rd(n,m){
            var c = m-n+1;
            return Math.floor(Math.random() * c + n);
        }
        var opt = {
            start:0,
            end:0
        }
        $("#btn").on("click",function () {
            var temp = rd(1,3);
            $(this).attr("disabled","true");
            opt.start=opt.end;
            opt.end=temp+opt.start;
            console.log(opt)
            $("#p").html(temp);
            var arr1 = arr.slice(opt.start,opt.end)
            console.log(arr1);
            var pop = $(".pop");
            arr1.forEach(function (v, i) {
                var pop = $(".pop");
                pop.animate({
                    top:v.y,
                    left:v.x
                },500)
            })
            $(this).attr("disabled",false)
        })

    })
</script>
</html>
